import { Button, Modal, Input, Select, Tree, Switch } from "antd";
import React, { useEffect, useState } from "react";
import sendFetch from "@/fetch";
import { TreeNode } from "antd/es/tree-select";

interface DataType {
  key: number;
  title: string;
  children: DataType[];
}

const CategoryList: React.FC = () => {
  const [categories, setCategories] = useState([]);
  const [rawCategories, setRawCategories] = useState([]);
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [newFather, setNFather] = useState(0);
  const [newTitle, setNTitle] = useState("");

  const getCategoryList = () => {
    sendFetch(`/manager/getCategoryList`).then((res: any) => {
      setCategories(res.data);
      console.log(res.data);
    });
  };

  useEffect(() => {
    getCategoryList();
  }, []);

  const handleOk = () => {
    setConfirmLoading(true);
    sendFetch(
      `/manager/addCategory`,
      { name: newTitle, pid: newFather },
      "GET"
    ).then(() => {
      setNFather(0);
      setNTitle("");
      setConfirmLoading(false);
      setOpen(false);
      getCategoryList();
    });
  };

  const handleCancel = () => {
    setNFather(0);
    setNTitle("");
    setOpen(false);
    setConfirmLoading(false);
  };

  return (
    <div>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          background: "#fff",
          padding: "3vh",
          margin: "3vh 0",
        }}
      >
        <div>
          <Button
            type="primary"
            onClick={() => {
              sendFetch(`/manager/getCategoryRawList`)
                .then((res: any) => {
                  setRawCategories(res.data);
                })
                .then(() => {
                  setOpen(true);
                });
            }}
          >
            添加分类
          </Button>
          <Modal
            title="添加分类"
            open={open}
            onOk={handleOk}
            confirmLoading={confirmLoading}
            onCancel={handleCancel}
          >
            父类：
            <Select
              placeholder="请选择"
              value={newFather}
              onChange={(value) => {
                setNFather(value);
              }}
              options={rawCategories}
              style={{ width: "100px" }}
            />
            <br />
            标题：
            <Input
              type=""
              value={newTitle}
              onChange={(e) => {
                setNTitle(e.target.value);
              }}
            />
          </Modal>
        </div>
      </div>
      <div style={{ background: "#fff", width: "100%" }}>
        <Tree
          showLine
          treeData={categories}
          blockNode
          titleRender={(nodeData: DataType) => {
            return (
              <div style={{display:'flex' , alignItems:'center'}}>
                <p>{nodeData.title}</p>
                <Button size="small" style={{margin:'0 1vw'}} onClick={()=>{
                  sendFetch(`/manager/deleteCategory`,{id:nodeData.key},"GET").then(()=>{
                    getCategoryList()
                  })
                }}>删除</Button>
              </div>
            );
          }}
        />
      </div>
    </div>
  );
};

export default CategoryList;
